<template>
  <div class="toolbar">
    <div class="toolbar-left">
      <h1>三维校园模型</h1>
      <span class="subtitle">基于Cesium的3D Tiles数字孪生展示</span>
    </div>
    <div class="toolbar-right">
      <button class="btn btn-secondary" @click="$emit('resetCamera')">
        <i class="icon-reset"></i>
        重置视角
      </button>
      <button class="btn btn-warning" @click="$emit('switchToSatellite')">
        <i class="icon-satellite"></i>
        切换卫星图像
      </button>
      <!--
      <button class="btn btn-secondary" @click="$emit('switchToBaseMap')">
        <i class="icon-globe"></i>
        基础地图
      </button>
      <button class="btn btn-info" @click="$emit('testWVPConnection')">
        <i class="icon-test"></i>
        测试WVP连接
      </button>
      <button class="btn btn-primary" @click="$emit('reloadWVPCameras')">
        <i class="icon-refresh"></i>
        重新加载摄像头
      </button>
      -->
      <button class="btn btn-secondary" @click="$emit('showAllHiddenCameras')">
        <i class="icon-eye"></i>
        显示隐藏摄像头
      </button>
      <button class="btn btn-success" @click="$emit('startAddingCamera')">
        <i class="icon-plus"></i>
        新增摄像头
      </button>
    </div>
  </div>
</template>

<script setup>
// 定义事件
defineEmits(['resetCamera', 'switchToSatellite', 'switchToBaseMap', 'startAddingCamera', 'testWVPConnection', 'reloadWVPCameras', 'showAllHiddenCameras'])
</script>

<style lang="scss" scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: white;
  border-bottom: 1px solid #e1e5e9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  .toolbar-left {
    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #1f2937;
    }

    .subtitle {
      font-size: 14px;
      color: #6b7280;
      margin-left: 8px;
    }
  }

  .toolbar-right {
    display: flex;
    gap: 8px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  &.btn-secondary {
    background: #6b7280;
    color: white;
    &:hover { background: #4b5563; }
  }

  &.btn-warning {
    background: #f59e0b;
    color: white;
    &:hover { background: #d97706; }
  }

  &.btn-success {
    background: #10b981;
    color: white;
    &:hover { background: #059669; }
  }

  &.btn-info {
    background: #3b82f6;
    color: white;
    &:hover { background: #2563eb; }
  }

  &.btn-primary {
    background: #8b5cf6;
    color: white;
    &:hover { background: #7c3aed; }
  }
}
</style>